<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入 css 文件 -->
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <style>
            /* 模糊匹配的方式 设置选择器 */
            /* col-xs-2  col-md-10 */
            .container {
                padding-top: 50px;
            }
            .text{
                padding: 15px;
            }
            .ceshi{
                width: 400px;
            }
        </style>
    </head>
    <body style="height: 2000px">

        <div class="container">
            <p class="bg-primary text">
                我回来，是为了那些回不来的人
            </p>

            <p><span aria-hidden="true">&times;</span></p>

            <p class="pull-right">行百里者半九十</p>

            <div class="clearfix"></div>

            <p class="ceshi center-block">我也是二十岁的大人了～</p>

            <div class="visible-lg">
                <img src="holder.js/100px80?bg=#aef&text=我是广告" alt="">
            </div>

            <div class="hidden-xs">
                <img src="holder.js/100x100?bg=#aef&text=个人助手" alt="">
            </div>
        </div>

        <script src="./bootstrap/js/holder.js"></script>
        <script src="./bootstrap/js/jquery.min.js"></script>
        <script src="./bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
